<script setup>
   
//体温单中间体温和脉搏折线图位置的行和列的线条数
const zhexianquyuY=42
const zhexianquyuX=41

//1.创建画笔------------------------------------------
function  CreateHuaBi (HuaBuId) {

return  HuaBuId.getContext("2d")

}
//2.画体温单中心折线图位置------------------------------------------
function  CreatezhexianquyuXY(qx,qy,zitipx,ctx){
//    qx,qy画图第一笔的开始坐标
    var qx1=qx
    var qy1=qy
    var qx2=qx
    var qy2=qy

    //画行
    for(var i=0 ;i<=zhexianquyuX;i++)
        {
            ctx.beginPath()
            ctx.moveTo(qx1,qy1)
            if(i===1 ||i===6 ||i===11 ||i===16||i===21 ||i===26 ||i===31 ||i===36 ||i===41)
                {
                    if(i===26){
                        ctx.strokeStyle="red"
                    }
                    else{
                        ctx.strokeStyle="black"
                    }
                    ctx.lineWidth=2
                  
                    ctx.lineTo(parseFloat(qx1+(zitipx*zhexianquyuY)),qy1)
            

                    ctx.stroke()
                   // console.log("画列"+i+"从X:"+parseFloat(qx1+(zitipx*zhexianquyuX))+"到Y:"+qy1)
                    ctx.closePath()
                    qy1=qy1+zitipx

                }
            else{
                ctx.strokeStyle="black"
                ctx.lineWidth=0.8
              
                ctx.lineTo(parseFloat(qx1+(zitipx*zhexianquyuY)),qy1)
        

                ctx.stroke()
               // console.log("画列"+i+"从X:"+parseFloat(qx1+(zitipx*zhexianquyuX))+"到Y:"+qy1)
                ctx.closePath()
                qy1=qy1+zitipx
            }     
            
            
        }
         //画列
        for(var i1=0 ;i1<=zhexianquyuY;i1++)
        {
            ctx.beginPath();
            ctx.moveTo(qx2,qy2);
            if(i1===0 ||i1===6 ||i1===12 ||i1===18 ||i1===24||i1===30 ||i1===36 )
                {  
                    if(i1===0 ){
                    ctx.strokeStyle="black"
                    ctx.lineWidth=2
                    ctx.lineTo(qx2,parseFloat(qy2+(zitipx*zhexianquyuX)))
         
                    ctx.stroke()
            
                    ctx.closePath()
                    qx2=qx2+zitipx
                    }
                    else{
                        ctx.strokeStyle="red"
                    ctx.lineWidth=2
                    ctx.lineTo(qx2,parseFloat(qy2+(zitipx*zhexianquyuX)))
         
                    ctx.stroke()
            
                    ctx.closePath()
                    qx2=qx2+zitipx
                    }
                    

                }
                else{
                    ctx.strokeStyle="black"
                    ctx.lineWidth=0.8
                    ctx.lineTo(qx2,parseFloat(qy2+(zitipx*zhexianquyuX)))
         
                    ctx.stroke()
            
                    ctx.closePath()
                    qx2=qx2+zitipx
                }
           
        }
    
 
}


//3.体温单时间位置的行和列的条数------------------------------------------
const shijianY=48
const shijianX=1
//体温单时间格式0、4、8、12或者1、5、9、13这些
const shijian1=[0,4,8,12,16,20,0,4,8,12,16,20,0,4,8,12,16,20,0,4,8,12,16,20,0,4,8,12,16,20,0,4,8,12,16,20,0,4,8,12,16,20,0,4,8,12,16,20]
//画体温单时间位置
function  CreatezshijianyuXY(qx,qy,zitipx,ctx){
    //    qx,qy画图第一笔的开始坐标
    //这里的qx1\2是相对于中心折线图第一笔坐标的相对位置，所以要减
        var qx1=qx-(zitipx*6)
        var qy1=qy-(zitipx*1)
        var qx2=qx-(zitipx*6)
        var qy2=qy-(zitipx*1)
    
        //画行
        for(var i=0 ;i<=shijianX;i++)
            {
                ctx.beginPath();
                ctx.moveTo(qx1,qy1);
                ctx.strokeStyle="black"
                ctx.lineWidth=0.8
                ctx.lineTo(parseFloat(qx1+(zitipx*shijianY)),qy1)
                ctx.stroke()
                  //  console.log("画时间列"+i+"从X:"+parseFloat(qx1+(zitipx*shijianX))+"到Y:"+qy1)
                    ctx.closePath()
                    qy1=qy1+zitipx
              
                
                
            }
             //画列
            for(var i1=0 ;i1<=shijianY;i1++)
            {
                ctx.beginPath()
                ctx.moveTo(qx2,qy2)
                if(i1==2){
                    ctx.font=zitipx+"px arial"
                    
                    ctx.fillText("时间",qx2,qy2+(0.8*zitipx) )
                }
               
                if(i1>5&&i1<48){
                    ctx.font=zitipx-2+"px arial"
                    ctx.fillStyle="red"
             
                    if(shijian1[i1]<10){
                        ctx.fillText(shijian1[i1],qx2+0.2*zitipx,qy2+(0.8*zitipx) )
                    }
                   else{
                        ctx.fillText(shijian1[i1],qx2,qy2+(0.8*zitipx) )
                    }
                }
               
             

                if(i1==0 ||i1==6 ||i1==12 ||i1===18 ||i1===24 ||i1===30||i1===36 ||i1===42 )
                    {  
                        if(i1==0 ||i1===6){
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*shijianX)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+zitipx 
                        }
                        else{
                             ctx.strokeStyle="red"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*shijianX)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+zitipx
                        }
                       
    
                    }
                else if(i1==1 ||i1===2 ||i1===3 ||i1===4||i1===5){
                    ctx.strokeStyle="white"
                    ctx.lineWidth=2
                    ctx.lineTo(qx2,parseFloat(qy2+(zitipx*shijianX)))
         
                    ctx.stroke()
            
                    ctx.closePath()
                    qx2=qx2+zitipx
                }
                    else{
                        ctx.strokeStyle="black"
                        ctx.lineWidth=0.8
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*shijianX)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+zitipx
                    }
               
            }
        
    
}
    
 

//4.体温单表头位置的行和列的条数（"日期","住院天数","手术后天数"）------------------------------------------
const biaotouY=8
const biaotouX=3
//体温单表头位置文本
const biaotouhang=["","日期","住院天数","手术后天数"]
// //这个时间、住院天数后台传值
// const biaotoullie=[
//     ["2024-07-01","2024-07-02","2024-07-03","2024-07-04","2024-07-05","2024-07-06","2024-07-07"],
//     ["1","2","3","4","5","6","7"],
//     ["1","2","3","4","5","6","7"]
// ]
//画体温单表头位置,这里的qx1\2是相对于中心折线图第一笔坐标的相对位置，所以要减
const  CreateBiaoTouXY=(qx,qy,zitipx,ctx)=>{
    var qx1=qx-(zitipx*6)
    var qy1=qy-(zitipx*7)
    var qx2=qx-(zitipx*6)
    var qy2=qy-(zitipx*7)

    //画行
    for(var i=0 ;i<=biaotouX;i++)
        {
            ctx.beginPath()
            ctx.moveTo(qx1,qy1)
            
            if(i>0){
                ctx.font=zitipx+"px arial"
                ctx.fillStyle="black"
                ctx.fillText(biaotouhang[i],qx1+(6-biaotouhang[i].length)/2*zitipx,qy1-1*zitipx)
               
            }
           
            ctx.strokeStyle="black"
            ctx.lineWidth=0.8
            ctx.lineTo(parseFloat(qx1+(zitipx*biaotouY*6)),qy1)
            ctx.stroke()
               // console.log("画时间列"+i+"从X:"+parseFloat(qx1+(zitipx*biaotouX))+"到Y:"+qy1)
                ctx.closePath()

               

                qy1=qy1+(zitipx*2)
          
            
            
        }
         //画列
        for(var i1=0 ;i1<=biaotouY;i1++)
        {
            ctx.beginPath()
            ctx.moveTo(qx2,qy2)
            //这是原本画框框的时候就生成时间，现在注释掉，下面单独画
            //   if(i1>0 &&i1<=7){
            //     ctx.font=biaotoullie+"px arial"
            //     ctx.fillStyle="black"
               
            //         ctx.fillText(biaotoullie[0][i1-1],qx2+0.5*zitipx,qy2+1*zitipx)
            //         ctx.fillText(biaotoullie[1][i1-1],qx2+3*zitipx,qy2+3*zitipx)
            //         ctx.fillText(biaotoullie[2][i1-1],qx2+3*zitipx,qy2+5*zitipx)
            //     }
                
                    if(i1===1||i1===0){
                    ctx.strokeStyle="black"
                    ctx.lineWidth=2
                    ctx.lineTo(qx2,parseFloat(qy2+(zitipx*biaotouX*2)))
         
                    ctx.stroke()
            
                    ctx.closePath()
                    qx2=qx2+(zitipx*6)
                    }
                    else{
                        if(i1!==8){
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*biaotouX*2)))
            
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+(zitipx*6)  
                        }
                        else{
                            ctx.strokeStyle="black"
                            ctx.lineWidth=0.8
                            ctx.lineTo(qx2,parseFloat(qy2+(zitipx*biaotouX*2)))
               
                            ctx.stroke()
                   
                            ctx.closePath()
                            qx2=qx2+(zitipx*6)  
                        }
                   
                    }
                   
               
        }
}
 

//5.体温单表左侧位置体温单位,脉搏单位的行和列的条数------------------------------------------
const zuoceY=2
const zuoceX=1
//体温单表左侧位置的体温和脉搏文本
const zuocetiwenmaibo=[
     [180,160,140,120,100,80,60,40,20],

    [42,41,40,39,38,37,36,35,34]
    
]
//画体温单左侧多少多少度，脉搏等单位休息位置
const  CreateZuoCeXY=(qx,qy,zitipx,ctx)=>{
   
   var qx1=qx-(zitipx*6)
   var qy1=qy 
   var qx2=qx-(zitipx*6)
   var qx3=qx-(zitipx*6)
   var qy2=qy 
   var qy3=qy 
   
   for(var i=0 ;i<=zuoceX;i++)
       {
           ctx.beginPath()
           ctx.moveTo(qx1,qy1)
           ctx.strokeStyle="black"
           ctx.lineWidth=0.8
           ctx.lineTo(parseFloat(qx1+(zitipx*zuoceY*3)),qy1)
           ctx.stroke()
           ctx.closePath()
          qy1=qy1+(zitipx*41)
     
       }
        //画列
       for(var i1=0 ;i1<=zuoceY;i1++)
       {
           ctx.beginPath()
           ctx.moveTo(qx2,qy2)
             if(i1>0 ){
               ctx.font=zitipx+"px arial"
               ctx.fillStyle="black"
              if(i1==1){
               ctx.font=zitipx-2+"px arial"
               ctx.fillText("脉搏",qx3+0.5*zitipx,qy3+1*zitipx)
               ctx.fillText("(次/分)",qx3+0.5*zitipx,qy3+1.8*zitipx)
              }
              if(i1==2){
                ctx.font=zitipx-2+"px arial"
               ctx.fillText("体温",qx3+3.5*zitipx,qy3+1*zitipx)
               ctx.fillText("(℃)",qx3+3.75*zitipx,qy3+1.8*zitipx)
              }  
                  ctx.font=zitipx+"px arial"
                  console.log("只是" + (zuocetiwenmaibo[i1-1][0].toString().length )  )
                   ctx.fillText(zuocetiwenmaibo[i1-1][0],qx3+ (i1-1)*zitipx*3+zitipx,qy3+2.5*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][1],qx3+           (i1-1)*zitipx*3+zitipx,qy3+6*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][2],qx3+           (i1-1)*zitipx*3+zitipx,qy3+11*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][3],qx3+           (i1-1)*zitipx*3+zitipx,qy3+16*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][4],qx3+           (i1-1)*zitipx*3+zitipx,qy3+21*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][5],qx3+           (i1-1)*zitipx*3+zitipx,qy3+26*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][6],qx3+           (i1-1)*zitipx*3+zitipx,qy3+31*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][7],qx3+           (i1-1)*zitipx*3+zitipx,qy3+36*zitipx)
                   ctx.fillText(zuocetiwenmaibo[i1-1][8],qx3+           (i1-1)*zitipx*3+zitipx,qy3+41*zitipx)

               }
               
                   
                   ctx.strokeStyle="black"
                   ctx.lineWidth=2
                   ctx.lineTo(qx2,parseFloat(qy2+(zitipx*41)))
        
                   ctx.stroke()
           
                   ctx.closePath()
                   qx2=qx2+(zitipx*3)
              
       }

}

//6.体温单表右侧位置的行和列的条数------------------------------------------
const yuoceY=1
const yuoceX=2
//体温单表右侧侧位置的体温和脉搏文本
const yuocetiwenmaibo=[
     ["脉搏","体温","心率"] 
    
]
//画体温单右侧图例，xx代表体温，实心红色圆是脉搏
const  CreateYuoCeXY=(qx,qy,zitipx,ctx)=>{
     
        var qx1=qx+(zitipx*42)
        var qy1=qy-(zitipx*1)
        var qx2=qx+(zitipx*42)
        var qy2=qy-(zitipx*1)
        var qx3=qx+(zitipx*42)
        
        var qy3=qy 
      
        //画行
        for(var i=0 ;i<yuoceX;i++)
            {
                ctx.beginPath()
                ctx.moveTo(qx1,qy1)
                
                
                ctx.strokeStyle="black"
                ctx.lineWidth=0.8
                ctx.lineTo(parseFloat(qx1+(zitipx*(zuoceY*1+1))),qy1)
                ctx.stroke()
                
                ctx.closePath()
                qy1=qy1+(zitipx*61)
            
            }
             //画列
            for(var i1=0 ;i1<=yuoceY;i1++)
            {
                ctx.beginPath()
                ctx.moveTo(qx2+(zitipx*3),qy2)
                  if(i1>0 ){
                    ctx.font=zitipx+"px arial"
                    ctx.fillStyle="black"
                   
                  
                        ctx.fillText(yuocetiwenmaibo[i1-1][0],qx3+1*zitipx,qy3+3.8*zitipx)
                        ctx.fillText(yuocetiwenmaibo[i1-1][1],qx3+1*zitipx,qy3+4.8*zitipx+4)
                        ctx.fillText(yuocetiwenmaibo[i1-1][2],qx3+1*zitipx,qy3+5.8*zitipx+4)
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2+(zitipx*3),parseFloat(qy2+(zitipx*61)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+(zitipx*3)
                        
                    }
                    
                        
                       

                        //画实心圆
                        ctx.beginPath()
                        ctx.moveTo( qx3+8,qy3+3.8*zitipx-2)
                        ctx.arc( qx3+8,qy3+3.8*zitipx-2,6,0,2*Math.PI)
                        ctx.fillStyle='red'
                        ctx.fill()
                        ctx.closePath()

                    

                        //画蓝色叉

                        ctx.strokeStyle="blue"
                        ctx.beginPath()
                        ctx.moveTo(qx3-6+8,qy3-6+4.8*zitipx)
                    
                        ctx.lineTo(qx3+6+8,qy3+6+4.8*zitipx)
                        ctx.stroke()
                        ctx.closePath()

                        ctx.beginPath()
                        ctx.moveTo(qx3-6+8,qy3+6+4.8*zitipx)
                    
                        ctx.lineTo(qx3+6+8,qy3-6+4.8*zitipx)
                        ctx.stroke()
                        ctx.closePath()

                        //画圆圈
                        ctx.beginPath()
                          ctx.strokeStyle="red"
                        ctx.moveTo( qx3+8,qy3+5.8*zitipx-2)
                        ctx.arc( qx3+8,qy3+5.8*zitipx-2,6,0,2*Math.PI)            
                        ctx.stroke()
                        ctx.closePath()
                   
            }
 }

//7.右上角那个备注位置------------------------------------------
const ysjY=1
const ysjX=3
//体温单表头位置文本
const ysjhang=["","备注","",""]
//画体右上角备注区域
const  CreateYuoShangFangXY=(qx,qy,zitipx,ctx)=>{
    //    qx,qy画图第一笔的开始坐标
    //这里的qx1\2是相对于中心折线图第一笔坐标的相对位置，所以要减
        var qx1=qx+(zitipx*42)
        var qy1=qy-(zitipx*7)
        var qx2=qx+(zitipx*42)
        var qy2=qy-(zitipx*7)
    
        //画行
        for(var i=0 ;i<=ysjX;i++)
            {
                ctx.beginPath()
                ctx.moveTo(qx1,qy1)
                
                if(i>0){
                    ctx.font="14px arial"
                    ctx.fillStyle="black"
                    ctx.fillText(ysjhang[i],qx1+(3-ysjhang[i].length)/2*zitipx,qy1-1*zitipx)
    
                }
               
                ctx.strokeStyle="black"
                ctx.lineWidth=0.8
                ctx.lineTo(parseFloat(qx1+(zitipx*ysjY*3)),qy1)
                ctx.stroke()
                  
                    ctx.closePath()

                   

                    qy1=qy1+(zitipx*2)
              
                
                
            }
             //画列
            for(var i1=1 ;i1<=ysjY;i1++)
            { 
                        qx2=qx2+(zitipx*3)
                        ctx.beginPath()
                        ctx.moveTo(qx2,qy2) 
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,qy2+(zitipx*6))
             
                        ctx.stroke()
                
                        ctx.closePath()
                       
                   
            }
        
   
    }


//8.体温单表左侧下方疼痛位置的行和列的条数------------------------------------------
const zuocetengtongY=2
const zuocetengtongX=1
//体温单表左侧位置的体温和脉搏文本
const zuocetengtongtiwenmaibo=[
    ['疼','痛','评','分'],
    [10,8,6,4,2]
   
]
//左侧下方疼痛区域
const  CreateTengTongZuoCeXY=(qx,qy,zitipx,ctx)=>{
   
   var qx1=qx-(zitipx*6)
   var qx2=qx-(zitipx*6)
   var qx3=qx-(zitipx*6)
   var qy1=qy+(zitipx*41)
   var qy2=qy +(zitipx*41)
   var qy3=qy +(zitipx*41)
 
   for(var i=0 ;i<=zuocetengtongX;i++)
       {
           ctx.beginPath()
           ctx.moveTo(qx1,qy1)
           ctx.strokeStyle="black"
           ctx.lineWidth=0.8
           ctx.lineTo(parseFloat(qx1+(zitipx*zuocetengtongY*3)),qy1)
           ctx.stroke()
           ctx.closePath()
           qy1=qy1+(zitipx*5)  
       }
        //画列
       for(var i1=0 ;i1<=zuocetengtongY;i1++)
       {
           ctx.beginPath()
           ctx.moveTo(qx2,qy2)
             if(i1>0 ){
               ctx.font=zitipx+"px  arial"
               ctx.fillStyle="black"
               
               if(i1===1){
               ctx.fillText(zuocetengtongtiwenmaibo[i1-1][0],qx3+(i1-1)*zitipx*3+zitipx,qy3+1*zitipx)
               ctx.fillText(zuocetengtongtiwenmaibo[i1-1][1],qx3+(i1-1)*zitipx*3+zitipx,qy3+2*zitipx)
               ctx.fillText(zuocetengtongtiwenmaibo[i1-1][2],qx3+(i1-1)*zitipx*3+zitipx,qy3+3*zitipx)
               ctx.fillText(zuocetengtongtiwenmaibo[i1-1][3],qx3+(i1-1)*zitipx*3+zitipx,qy3+4*zitipx)
               }
               else {
                   ctx.fillText(zuocetengtongtiwenmaibo[i1-1][0],qx3+(i1-1)*zitipx*2.5+zitipx,qy3+0.7*zitipx)
                   ctx.fillText(zuocetengtongtiwenmaibo[i1-1][1],qx3+(i1-1)*zitipx*3+zitipx,qy3+1.5*zitipx)
                   ctx.fillText(zuocetengtongtiwenmaibo[i1-1][2],qx3+(i1-1)*zitipx*3+zitipx,qy3+2.5*zitipx)
                   ctx.fillText(zuocetengtongtiwenmaibo[i1-1][3],qx3+(i1-1)*zitipx*3+zitipx,qy3+3.5*zitipx)
                   ctx.fillText(zuocetengtongtiwenmaibo[i1-1][4],qx3+(i1-1)*zitipx*3+zitipx,qy3+4.5*zitipx)
               }
                   

               }
               
                   
                   ctx.strokeStyle="black"
                   ctx.lineWidth=2
                   ctx.lineTo(qx2,parseFloat(qy2+(zitipx*5)))
        
                   ctx.stroke()
           
                   ctx.closePath()
                   qx2=qx2+(zitipx*3)
              
       }

}


//9.体温单中间疼痛图位置的行和列的线条数------------------------------------------
const tengtongzhexianquyuY=42
const tengtongzhexianquyuX=5
//画体温单疼痛评分的方格图
const  CreateTengTongquyuXY=(qx,qy,zitipx,ctx)=>{
    //    qx,qy画图第一笔的开始坐标
        var qx1=qx
        var qy1=qy+41*zitipx
        var qx2=qx
        var qy2=qy+41*zitipx
    
        //画行
        for(var i=0 ;i<=tengtongzhexianquyuX;i++)
            {
                ctx.beginPath()
                ctx.moveTo(qx1,qy1)
                
                    ctx.strokeStyle="black"
                    ctx.lineWidth=0.8
                    ctx.lineTo(parseFloat(qx1+(zitipx*tengtongzhexianquyuY)),qy1)
                    ctx.stroke()
                    ctx.closePath()
                    qy1=qy1+zitipx
                       
            }
             //画列
            for(var i1=0 ;i1<=tengtongzhexianquyuY;i1++)
            {
                ctx.beginPath();
                ctx.moveTo(qx2,qy2);
                if(i1===0||i1===6 ||i1===12 ||i1===18 ||i1===24||i1===30 ||i1===36 )
                    {  
                        if(i1===0){
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*tengtongzhexianquyuX)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+zitipx  
                        }
                        else{
                          ctx.strokeStyle="red"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*tengtongzhexianquyuX)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+zitipx   
                        }
                       
    
                    }
                    else{
                        ctx.strokeStyle="black"
                        ctx.lineWidth=0.8
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*tengtongzhexianquyuX)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+zitipx
                    }
            }
    }

//10.格子11111疼痛位置下面要4种格子一种上下占两格2ziti高，比如呼吸次数/分取名gezhi1，连前面的标题一起画------------------------------------------
const gezhi1Y=48
const gezhi1x=2
//画呼吸次数/分用格式1
const  Creategezhi1quyuXY=(qx,qy,zitipx,ctx)=>{
    //    qx,qy画图第一笔的开始坐标
        var qx1=qx-(zitipx*6)
        var qy1=qy+46*zitipx
        var qx2=qx-(zitipx*6)
        var qy2=qy+46*zitipx
        var qx3=qx-(zitipx*6)
        var qy3=qy+46*zitipx
        var title="呼吸(次/分)"
        //画行
        for(var i=0 ;i<=gezhi1x;i++)
            {
                if(i===1){
               
               ctx.font=zitipx-2+"px  arial"
               ctx.fillStyle="black"   
               ctx.fillText(title,qx3,qy3+1.2*zitipx)
                }

                if(i===0){
                    ctx.beginPath()
                    ctx.moveTo(qx1,qy1)
                
                    ctx.strokeStyle="black"
                    ctx.lineWidth=2
                    ctx.lineTo(parseFloat(qx1+(zitipx*(gezhi1Y ))),qy1)
                    ctx.stroke()
                    ctx.closePath()
                    qy1=qy1+2*zitipx 
                }
                if(i===2){
                    ctx.beginPath()
                    ctx.moveTo(qx1,qy1)
                
                    ctx.strokeStyle="black"
                    ctx.lineWidth=0.8
                    ctx.lineTo(parseFloat(qx1+(zitipx*(gezhi1Y ))),qy1)
                    ctx.stroke()
                    ctx.closePath()
                    qy1=qy1+2*zitipx 
                }
                       
            }
             //画列
            for(var i1=0 ;i1<=gezhi1Y;i1++)
            { 
                if(i1==0){
                       ctx.beginPath();
                        ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi1x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+6*zitipx
                }


               if(i1>5 )
               {
                if(i1==42 ||i1===12 ||i1===6 ||i1===18 ||i1===24||i1===30 ||i1===36 )
                {  
                    ctx.beginPath();
                ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi1x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+zitipx
                }
                else{
                    ctx.beginPath();
                    ctx.moveTo(qx2,qy2);
                
                            ctx.strokeStyle="black"
                            ctx.lineWidth=0.8
                            ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi1x)))
                
                            ctx.stroke()
                    
                            ctx.closePath()
                            qx2=qx2+zitipx
                }
               
               }


               
                   
            }
    }

//11.格子222222疼痛位置下面要4种格子一种左右占三格3ziti宽，比如血压mmhg取名gezhi2，连前面的标题一起画------------------------------------------
const gezhi2Y=48
const gezhi2x=1
//画呼吸次数/分用格式1
const  Creategezhi2quyuXY=(qx,qy,zitipx,ctx)=>{
    //    qx,qy画图第一笔的开始坐标
        var qx1=qx-(zitipx*6)
        var qy1=qy+48*zitipx
        var qx2=qx-(zitipx*6)
        var qy2=qy+48*zitipx
        var qx3=qx-(zitipx*6)
        var qy3=qy+48*zitipx
        var title="血压(mmHg)"
        //画行
        for(var i=0 ;i<=gezhi2x;i++)
            {
                if(i===0){
                ctx.font=zitipx-2+"px  arial"
                ctx.fillStyle="black"   
                ctx.fillText(title,qx3,qy3+0.8*zitipx) 
                }
                
              
                    ctx.beginPath()
                    ctx.moveTo(qx1,qy1)
                
                    ctx.strokeStyle="black"
                    ctx.lineWidth=0.8
                    ctx.lineTo(parseFloat(qx1+(zitipx*(gezhi2Y ))),qy1)
                    ctx.stroke()
                    ctx.closePath()
                    qy1=qy1+1*zitipx 
                 
               
                       
            }
             //画列
            for(var i1=0 ;i1<=gezhi2Y-28;i1++)
            {
                 
                if(i1==0){
                       ctx.beginPath();
                        ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi2x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+6*zitipx
                }


               if(i1>5 )
               {
                if(i1==6 ||i1==8 ||i1===10 ||i1===12 ||i1===14||i1===16 ||i1===18 )
                {  
                    ctx.beginPath();
                ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi2x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+3*zitipx

                }
                else{
                     ctx.beginPath();
                ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=0.8
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi2x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+3*zitipx
                }
               
               }


               
                   
            }
    }

//12.格子33333疼痛位置下面要4种格子一种左右占四格6ziti宽，比如大便次数、体重等取名gezhi3，连前面的标题一起画------------------------------------------
const gezhi3Y=48
const gezhi3x=1
//画呼吸次数/分用格式1，y是纵坐标偏移量，如果一次调用该方法y就写0,第二次写1，第三次写2，依次...
const  Creategezhi3quyuXY=(qx,qy,zitipx,ctx,title,y)=>{
    //    qx,qy画图第一笔的开始坐标
        var qx1=qx-(zitipx*6)
        var qy1=qy+(49+y)*zitipx
        var qx2=qx-(zitipx*6)
        var qy2=qy+(49+y)*zitipx
        var qx3=qx-(zitipx*6)
        var qy3=qy+(49+y)*zitipx
        
        //画行
        for(var i=0 ;i<=gezhi2x;i++)
            {
                ctx.lineWidth=0.8
                if(i===0){
                ctx.font=zitipx-2+"px  arial"
                ctx.fillStyle="black"   
                ctx.fillText(title,qx3,qy3+0.8*zitipx) 
                }
                
              
                    ctx.beginPath()
                    ctx.moveTo(qx1,qy1)
                
                    ctx.strokeStyle="black"
                    
                    ctx.lineTo(parseFloat(qx1+(zitipx*(gezhi2Y ))),qy1)
                    ctx.stroke()
                    ctx.closePath()
                    qy1=qy1+1*zitipx 
                 
               
                       
            }
             //画列
            for(var i1=0 ;i1<=gezhi2Y-40;i1++)
            {
                if(i1==0 ||i1==1 ||i1===2 ||i1===3 ||i1===4||i1===5 ||i1===6||i1===7  )
                { 
                    ctx.beginPath();
                        ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi2x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+6*zitipx
                }
               else{
                  ctx.beginPath();
                        ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=0.8
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi2x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+6*zitipx
               }
                     
      
            }
    }

//13.格子444444疼痛位置下面要4种格子一种左右占四格6ziti宽，比如过敏药物取名gezhi4，连前面的标题一起画------------------------------------------
const gezhi4Y=48
const gezhi4x=2
//画呼吸次数/分用格式1,这里的y就填上面调用了几次格式3 gezhi3就填几次
const  Creategezhi4quyuXY=(qx,qy,zitipx,ctx,title,y)=>{
    //    qx,qy画图第一笔的开始坐标
        var qx1=qx-(zitipx*6)
        var qy1=qy+(49+y)*zitipx
        var qx2=qx-(zitipx*6)
        var qy2=qy+(49+y)*zitipx
        var qx3=qx-(zitipx*6)
        var qy3=qy+(49+y)*zitipx
       
        //画行
        for(var i=0 ;i<=gezhi1x;i++)
            {
                if(i===1){
               
               ctx.font=zitipx-2+"px  arial"
               ctx.fillStyle="black"   
               ctx.fillText(title,qx3,qy3+1.2*zitipx)
                }

                if(i!==1){
                    ctx.beginPath()
                    ctx.moveTo(qx1,qy1)
                
                    ctx.strokeStyle="black"
                    ctx.lineWidth=0.8
                    ctx.lineTo(parseFloat(qx1+(zitipx*(gezhi1Y ))),qy1)
                    ctx.stroke()
                    ctx.closePath()
                    qy1=qy1+2*zitipx 
                }
               
                       
            }
             //画列
            for(var i1=0 ;i1<=gezhi1Y-40;i1++)
            {
                if(i1==0 ||i1==1 ||i1===2 ||i1===3 ||i1===4||i1===5 ||i1===6||i1===7  )
                { 
                    ctx.beginPath();
                        ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=2
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi1x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+6*zitipx
              
                }
                else{
                    ctx.beginPath();
                        ctx.moveTo(qx2,qy2);
               
                        ctx.strokeStyle="black"
                        ctx.lineWidth=0.8
                        ctx.lineTo(qx2,parseFloat(qy2+(zitipx*gezhi1x)))
             
                        ctx.stroke()
                
                        ctx.closePath()
                        qx2=qx2+6*zitipx
                }
                       
              
               
                   
            }
    }


//###############################################################################################
//A计算横坐标
const twhzb=(zitipx,riqi,x)=>{
    const shijianandhengzuobiao=[]

    // 这里循环7次每次生成一个6个时间段的数组里面有六个对象，每个对象包含日期、时间和对应的横坐标
    
    for(var i=0;i<7;i++)
      {

        for(var i1=1;i1<=6;i1++)   
        {  
        shijianandhengzuobiao.push({rq:riqi[i],sj:(i1-1)*4,hzb:((i1+i*6)*zitipx)-8+x })
        }
      
    }
    return shijianandhengzuobiao
}
 
//B计算纵坐标，zitipx是字体像素，yaozhuanhuandewendu就是你要获取纵坐标的温度或者脉搏或者疼痛，zhi是类型是算体温就传42，脉搏就穿180，疼痛评分就传10，y是中心折线图区域的坐标
const twzzb=(zitipx,yaozhuanhuandewendu,zhi, y)=>{
 
if(zhi===42){
    return ((((zhi-yaozhuanhuandewendu)/0.1 )*0.5)+1)*zitipx+y //一格是0.2
}
  
else if(zhi===180){
    return  (((zhi-yaozhuanhuandewendu)*0.25)+1)*zitipx+y //一格是4次
}
else if(zhi===10){
   
    return  (((zhi-yaozhuanhuandewendu)*0.5))*zitipx+y+41*zitipx //一格是2个疼痛，半格是一个疼痛
}

}

 
//C计算横纵坐标
const twhzzb=(zitipx,biaotoullierq,chuanrudetiwenlist,x,y,lx)=>{
   
       let tiwenxy=[]
       
       
        for(var k=0;k<chuanrudetiwenlist.length;k++)
        {   
            for(var k1=0;k1<twhzb(zitipx,biaotoullierq,x).length;k1++)
            {   
            
            //console.log("***************")
            if(chuanrudetiwenlist[k].rq==twhzb(zitipx,biaotoullierq,x)[k1].rq &&chuanrudetiwenlist[k].sj==twhzb(zitipx,biaotoullierq,x)[k1].sj)
            {     //  console.log("**33333333333**")
                   var yy1=twzzb (zitipx,chuanrudetiwenlist[k].wd,lx, y)
                   var xx1=twhzb(zitipx,biaotoullierq,x)[k1].hzb
                   
                   tiwenxy.push({xx:xx1,yy:yy1})
            }
            }
            
             
               
        }
        return tiwenxy
}
//###############################################################################################

//14.----------开始画体温的折线(该方法只能画体温折线图，下面的15通用方法可以根据传参画体温，脉搏，心率折线图)------------------------------------------
const  CreateTiWenZheXianTuXY=(qx,qy,zitipx,ctx)=>{
     var qx1=qx 
       var qy1=qy
        var tiwewww=[
         {rq:"2024-07-01" ,sj:0,wd:37},
         {rq:"2024-07-01" ,sj:4,wd:37.5},
         {rq:"2024-07-01" ,sj:8,wd:37.8},
         {rq:"2024-07-01" ,sj:12,wd:37},
         {rq:"2024-07-01" ,sj:16,wd:39},
         {rq:"2024-07-01" ,sj:20,wd:39.5},

         {rq:"2024-07-02" ,sj:0,wd:38},
         {rq:"2024-07-02" ,sj:4,wd:37.5},
         {rq:"2024-07-02" ,sj:8,wd:37.8},
         {rq:"2024-07-02" ,sj:12,wd:38},
         {rq:"2024-07-02" ,sj:16,wd:39},
         {rq:"2024-07-02" ,sj:20,wd:39.5},

         {rq:"2024-07-03" ,sj:0,wd:38},
         {rq:"2024-07-03" ,sj:4,wd:37.5},
         {rq:"2024-07-03" ,sj:8,wd:36.8},
         {rq:"2024-07-03" ,sj:12,wd:38},
         {rq:"2024-07-03" ,sj:16,wd:38.8},
         {rq:"2024-07-03" ,sj:20,wd:39.5},

         {rq:"2024-07-04" ,sj:0,wd:37},
         {rq:"2024-07-04" ,sj:4,wd:37.5},
         {rq:"2024-07-04" ,sj:8,wd:41.8},
         {rq:"2024-07-04" ,sj:12,wd:38},
         {rq:"2024-07-04" ,sj:16,wd:39},
         {rq:"2024-07-04" ,sj:20,wd:39.5},

         {rq:"2024-07-05" ,sj:0,wd:38},
         {rq:"2024-07-05" ,sj:4,wd:36.5},
         {rq:"2024-07-05" ,sj:8,wd:37.8},
         {rq:"2024-07-05" ,sj:12,wd:38},
         {rq:"2024-07-05" ,sj:16,wd:37},
         {rq:"2024-07-05" ,sj:20,wd:39.5},

         {rq:"2024-07-06" ,sj:0,wd:37.8},
         {rq:"2024-07-06" ,sj:4,wd:37.5},
         {rq:"2024-07-06" ,sj:8,wd:37.8},
         {rq:"2024-07-06" ,sj:12,wd:38},
         {rq:"2024-07-06" ,sj:16,wd:39},
         {rq:"2024-07-06" ,sj:20,wd:39.5},

         {rq:"2024-07-07" ,sj:0,wd:37.9},
         {rq:"2024-07-07" ,sj:4,wd:39.5},
         {rq:"2024-07-07" ,sj:8,wd:37.8},
         {rq:"2024-07-07" ,sj:12,wd:38},
         {rq:"2024-07-07" ,sj:16,wd:39},
         {rq:"2024-07-07" ,sj:20,wd:39.5}

      ]

      ctx.strokeStyle="blue"
      ctx.lineWidth=1.2
      for(var j=0;j< twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42).length-1;j++){
       
      ctx.beginPath()
      ctx.moveTo(twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].xx,twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].yy)
  
      ctx.lineTo(twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j+1].xx,twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j+1].yy)
      ctx.stroke()
     // console.log("画列"+i+"从X:"+parseFloat(qx1+(zitipx*zhexianquyuX))+"到Y:"+qy1)
      ctx.closePath()

      ctx.beginPath()
      ctx.moveTo(twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].xx-4,twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].yy+4)
  
      ctx.lineTo(twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].xx+4,twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].yy-4)
      ctx.stroke()
      ctx.closePath()

      ctx.beginPath()
     ctx.moveTo(twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].xx-4,twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].yy-4)
     ctx.lineTo(twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].xx+4,twhzzb(zitipx,biaotoullie[0],tiwewww,qx1,qy1,42)[j].yy+4)
     ctx.stroke()
     ctx.closePath()

      }

}
    

//15.体温折线图区域根据传入类型画脉搏的折线,lx参数1=体温，2=脉搏，3=心率，4=呼吸,buhuaquan=1表示只画线，2=要画圈或者叉
const  CreateZheXianTuXY=(qx,qy,zitipx,ctx,list,zhexianleixing,lx,buhuaquan)=>{
    var qx1=qx 
      var qy1=qy
       
     if(zhexianleixing===42 && lx===1){
            ctx.strokeStyle="blue"
     }
     if((zhexianleixing===180 &&(lx===2 ||lx===3))||zhexianleixing===10){
        ctx.strokeStyle="red"
        
     }
     ctx.lineWidth=1.2

    //   for(var j4=0;j4<= twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing).length-1;j4++)
    //     {
    //         console.log(list.length+"*****"+list[j4].wd)
    //     }
//这个for循环画折线
     for(var j=0;j< twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing).length-1;j++){
      
     ctx.beginPath()
     
     ctx.moveTo(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j].xx,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j].yy)
      
     //console.log("移动到"+twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j].xx+","+twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j].yy)
     ctx.lineTo(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j+1].xx,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j+1].yy)
      
     ctx.stroke()
    // console.log("画到"+twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j+1].xx+","+twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j].yy)
   
     ctx.closePath()
 
     }
//这个for循环画圆点或者叉
     for(var j1=0;j1<= twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing).length-1;j1++){
      
        //如果是体温就画叉
        if(zhexianleixing===42 && lx===1 &&buhuaquan===2){
   
               ctx.beginPath()
               ctx.moveTo(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].xx-4,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].yy+4)
           
               ctx.lineTo(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].xx+4,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].yy-4)
               ctx.stroke()
               ctx.closePath()
   
               ctx.beginPath()
               ctx.moveTo(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].xx-4,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].yy-4)
           
               ctx.lineTo(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].xx+4,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].yy+4)
               ctx.stroke()
   
               ctx.closePath()
        }
        //如果是脉搏就画实心红圈
        else if((zhexianleixing===180 && lx===2 &&buhuaquan===2)||zhexianleixing===10){
           ctx.beginPath()
           ctx.moveTo(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].xx-4,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].yy+4)
           ctx.arc(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].xx,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].yy,4,0,2*Math.PI)
           ctx.fillStyle='red'
           ctx.fill()
           ctx.closePath()
   
          
        }
    //如果是心率就画红圈
    else if(zhexianleixing===180 &&lx===3 &&buhuaquan===2){
        ctx.beginPath()
        ctx.arc(twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].xx,twhzzb(zitipx,biaotoullie[0],list,qx1,qy1,zhexianleixing)[j1].yy,4,0,2*Math.PI)
        ctx.fillStyle='red'
        ctx.stroke()
        ctx.closePath()

       
     }
        }
    
 

}

//16.体温折线图区域画心率和脉搏之间折线,lx参数1=体温，2=脉搏，3=心率，4=呼吸,buhuaquan=1表示只画线，2=要画圈或者叉
   const  CreateZheXianXingLvTuXY=(qx,qy,zitipx,ctx,list,zhexianleixing,lx,buhuaquan,listxinglv)=>{
     
     
     for(var i=0;i<list.length;i++){
        for(var i2=0;i2<listxinglv.length;i2++){
            if(list[i].rq===listxinglv[i2].rq && list[i].sj===listxinglv[i2].sj){
                //1次呼吸0.25格。0.1度0.5格,42+(listxinglv.wd*0.25)/0.5表示吧心率转城温度的纵向位置
                var listmaiboAndxinglv=[]
                listmaiboAndxinglv.push({rq:list[i].rq,sj:list[i2].sj,wd:list[i].wd} )
               // console.log("***脉搏值"+ list[i].wd )
                listmaiboAndxinglv.push({rq:list[i].rq,sj:list[i2].sj,wd:listxinglv[i2].wd})
               // console.log("***心率值"+ listxinglv[i2].wd )
                CreateZheXianTuXY(qx,qy,zitipx,ctx,listmaiboAndxinglv,zhexianleixing,lx,buhuaquan)
                //listmaiboAndxinglv.push({rq:list[i].rq,sj:list[i].sj,wd:42+(listxinglv.wd*0.25)/0.5})
              

            }
        }
     }
   
    // return listmaiboAndxinglv
}

//17.画体温单表头位置,这里的qx1\2是相对于中心折线图第一笔坐标的相对位置，所以要减
const  ZhiCreateBiaoTouXYshijian=(qx,qy,zitipx,ctx,list)=>{
    var qx1=qx-(zitipx*6)
    var qy1=qy-(zitipx*7)
    var qx2=qx-(zitipx*6)
    var qy2=qy-(zitipx*7)

  
         //画列
        for(var i1=0 ;i1<=biaotouY;i1++)
        {
            ctx.beginPath()
            ctx.moveTo(qx2,qy2) 
              if(i1>0 &&i1<=7){
                ctx.font=zitipx+"px arial"
                ctx.fillStyle="black"
               
                    ctx.fillText(list[0][i1-1],qx2+0.5*zitipx,qy2+1*zitipx)
                    ctx.fillText(list[1][i1-1],qx2+3*zitipx,qy2+3*zitipx)
                    ctx.fillText(list[2][i1-1],qx2+3*zitipx,qy2+5*zitipx)
                    qx2=qx2+(zitipx*6)
                }
                else{
                    qx2=qx2+(zitipx*6)
                }
               
               
        }
}
 






//下面三个数组是体温、脉搏和心率的值与对应的日期和时间的数组
const  tiwenglist=[
         {rq:"2024-07-01" ,sj:0,wd:39},
         {rq:"2024-07-01" ,sj:4,wd:40.5},
         {rq:"2024-07-01" ,sj:8,wd:41.8},
         {rq:"2024-07-01" ,sj:12,wd:40},
         {rq:"2024-07-01" ,sj:16,wd:41},
         {rq:"2024-07-01" ,sj:20,wd:39.5},

         {rq:"2024-07-02" ,sj:0,wd:38},
         {rq:"2024-07-02" ,sj:4,wd:37.5},
         {rq:"2024-07-02" ,sj:8,wd:37.8},
         {rq:"2024-07-02" ,sj:12,wd:38},
         {rq:"2024-07-02" ,sj:16,wd:39},
         {rq:"2024-07-02" ,sj:20,wd:39.5},

         {rq:"2024-07-03" ,sj:0,wd:38},
         {rq:"2024-07-03" ,sj:4,wd:37.5},
         {rq:"2024-07-03" ,sj:8,wd:36.8},
         {rq:"2024-07-03" ,sj:12,wd:38},
         {rq:"2024-07-03" ,sj:16,wd:38.8},
         {rq:"2024-07-03" ,sj:20,wd:38.5},

         {rq:"2024-07-04" ,sj:0,wd:37},
         {rq:"2024-07-04" ,sj:4,wd:37.5},
         {rq:"2024-07-04" ,sj:8,wd:38.8},
         {rq:"2024-07-04" ,sj:12,wd:38},
         {rq:"2024-07-04" ,sj:16,wd:38.4},
         {rq:"2024-07-04" ,sj:20,wd:37.5},

         {rq:"2024-07-05" ,sj:0,wd:38},
         {rq:"2024-07-05" ,sj:4,wd:36.5},
         {rq:"2024-07-05" ,sj:8,wd:37.8},
         {rq:"2024-07-05" ,sj:12,wd:38},
         {rq:"2024-07-05" ,sj:16,wd:37},
         {rq:"2024-07-05" ,sj:20,wd:38.5},

         {rq:"2024-07-06" ,sj:0,wd:37.8},
         {rq:"2024-07-06" ,sj:4,wd:37.5},
         {rq:"2024-07-06" ,sj:8,wd:37.8},
         {rq:"2024-07-06" ,sj:12,wd:38},
         {rq:"2024-07-06" ,sj:16,wd:38.1},
         {rq:"2024-07-06" ,sj:20,wd:37.5},

         {rq:"2024-07-07" ,sj:0,wd:37.9},
         {rq:"2024-07-07" ,sj:4,wd:38.5},
         {rq:"2024-07-07" ,sj:8,wd:37.8},
         {rq:"2024-07-07" ,sj:12,wd:38},
         {rq:"2024-07-07" ,sj:16,wd:37},
         {rq:"2024-07-07" ,sj:20,wd:37.5}]

const  miabolist=[
         {rq:"2024-07-01" ,sj:0,wd:78},
         {rq:"2024-07-01" ,sj:4,wd:80},
         {rq:"2024-07-01" ,sj:8,wd:82},
         {rq:"2024-07-01" ,sj:12,wd:87},
         {rq:"2024-07-01" ,sj:16,wd:77},
         {rq:"2024-07-01" ,sj:20,wd:90},

         {rq:"2024-07-02" ,sj:0,wd:71},
         {rq:"2024-07-02" ,sj:4,wd:82},
         {rq:"2024-07-02" ,sj:8,wd:88},
         {rq:"2024-07-02" ,sj:12,wd:83},
         {rq:"2024-07-02" ,sj:16,wd:87},
         {rq:"2024-07-02" ,sj:20,wd:85},

         {rq:"2024-07-03" ,sj:0,wd:71},
         {rq:"2024-07-03" ,sj:4,wd:82},
         {rq:"2024-07-03" ,sj:8,wd:88},
         {rq:"2024-07-03" ,sj:12,wd:87},
         {rq:"2024-07-03" ,sj:16,wd:77},
         {rq:"2024-07-03" ,sj:20,wd:86},

         {rq:"2024-07-04" ,sj:0,wd:77},
         {rq:"2024-07-04" ,sj:4,wd:85},
         {rq:"2024-07-04" ,sj:8,wd:85},
         {rq:"2024-07-04" ,sj:12,wd:77},
         {rq:"2024-07-04" ,sj:16,wd:82},
         {rq:"2024-07-04" ,sj:20,wd:69},

         {rq:"2024-07-05" ,sj:0,wd:77},
         {rq:"2024-07-05" ,sj:4,wd:88},
         {rq:"2024-07-05" ,sj:8,wd:65},
         {rq:"2024-07-05" ,sj:12,wd:79},
         {rq:"2024-07-05" ,sj:16,wd:87},
         {rq:"2024-07-05" ,sj:20,wd:91},

         {rq:"2024-07-06" ,sj:0,wd:87},
         {rq:"2024-07-06" ,sj:4,wd:89},
         {rq:"2024-07-06" ,sj:8,wd:85},
         {rq:"2024-07-06" ,sj:12,wd:84},
         {rq:"2024-07-06" ,sj:16,wd:83},
         {rq:"2024-07-06" ,sj:20,wd:82},

         {rq:"2024-07-07" ,sj:0,wd:88},
         {rq:"2024-07-07" ,sj:4,wd:87},
         {rq:"2024-07-07" ,sj:8,wd:78},
         {rq:"2024-07-07" ,sj:12,wd:89},
         {rq:"2024-07-07" ,sj:16,wd:90},
         {rq:"2024-07-07" ,sj:20,wd:79}

      ]
const  xinglvlist=[
         {rq:"2024-07-01" ,sj:0,wd:100},
         {rq:"2024-07-01" ,sj:4,wd:112},
         {rq:"2024-07-01" ,sj:8,wd:98},
         {rq:"2024-07-01" ,sj:12,wd:120}
        ]


const  tiwenglist2=[
         

         {rq:"2024-07-01" ,sj:0,wd:38.5},
         {rq:"2024-07-01" ,sj:4,wd:37.5},
         {rq:"2024-07-01" ,sj:8,wd:37.8},
         {rq:"2024-07-01" ,sj:12,wd:38},
         {rq:"2024-07-01" ,sj:16,wd:39},
         {rq:"2024-07-01" ,sj:20,wd:39.5},

         {rq:"2024-07-02" ,sj:0,wd:39},
         {rq:"2024-07-02" ,sj:4,wd:40.5},
         {rq:"2024-07-02" ,sj:8,wd:41.8},
         {rq:"2024-07-02" ,sj:12,wd:40},
         {rq:"2024-07-02" ,sj:16,wd:41},
         {rq:"2024-07-02" ,sj:20,wd:39.5},

         {rq:"2024-07-03" ,sj:0,wd:38},
         {rq:"2024-07-03" ,sj:4,wd:37.5},
         {rq:"2024-07-03" ,sj:8,wd:36.8},
         {rq:"2024-07-03" ,sj:12,wd:38},
         {rq:"2024-07-03" ,sj:16,wd:38.8},
         {rq:"2024-07-03" ,sj:20,wd:38.5},

         {rq:"2024-07-04" ,sj:0,wd:37.9},
         {rq:"2024-07-04" ,sj:4,wd:38.5},
         {rq:"2024-07-04" ,sj:8,wd:37.8},
         {rq:"2024-07-04" ,sj:12,wd:38},
         {rq:"2024-07-04" ,sj:16,wd:37},
         {rq:"2024-07-04" ,sj:20,wd:37.5},

         

         {rq:"2024-07-05" ,sj:0,wd:38},
         {rq:"2024-07-05" ,sj:4,wd:36.5},
         {rq:"2024-07-05" ,sj:8,wd:37.8},
         {rq:"2024-07-05" ,sj:12,wd:38},
         {rq:"2024-07-05" ,sj:16,wd:37},
         {rq:"2024-07-05" ,sj:20,wd:38.5},

         {rq:"2024-07-06" ,sj:0,wd:37.8},
         {rq:"2024-07-06" ,sj:4,wd:37.5},
         {rq:"2024-07-06" ,sj:8,wd:37.8},
         {rq:"2024-07-06" ,sj:12,wd:38},
         {rq:"2024-07-06" ,sj:16,wd:38.1},
         {rq:"2024-07-06" ,sj:20,wd:37.5},
         
         {rq:"2024-07-07" ,sj:0,wd:37},
         {rq:"2024-07-07" ,sj:4,wd:37.5},
         {rq:"2024-07-07" ,sj:8,wd:38.8},
         {rq:"2024-07-07" ,sj:12,wd:38},
         {rq:"2024-07-07" ,sj:16,wd:38.4},
         {rq:"2024-07-07" ,sj:20,wd:37.5}
         ]

//这个时间、住院天数后台传值模拟数据
const biaotoullie=[
    ["2024-07-01","2024-07-02","2024-07-03","2024-07-04","2024-07-05","2024-07-06","2024-07-07"],
    ["1","2","3","4","5","6","7"],
    ["1","2","3","4","5","6","7"]
]

//这个时间、住院天数后台传值
const biaotoullie1=[
    ["2024-07-08","2024-07-09","2024-07-10","2024-07-11","2024-07-12","2024-07-13","2024-07-14"],
    ["8","9","10","11","12","13","14"],
    ["8","9","10","11","12","13","14"]
]
//模拟疼痛数据
const  tengtonglist=[
         {rq:"2024-07-01" ,sj:0,wd:2},
         {rq:"2024-07-01" ,sj:4,wd:4},
         {rq:"2024-07-01" ,sj:8,wd:3},
         {rq:"2024-07-01" ,sj:12,wd:7},
         {rq:"2024-07-01" ,sj:16,wd:8}
        ]
//模拟疼痛数据
const  huxilist=[
         {rq:"2024-07-01" ,sj:0,wd:21},
         {rq:"2024-07-01" ,sj:4,wd:22},
         {rq:"2024-07-01" ,sj:8,wd:33},
         {rq:"2024-07-01" ,sj:12,wd:27},
         {rq:"2024-07-01" ,sj:16,wd:28},
         {rq:"2024-07-01" ,sj:16,wd:28},

         {rq:"2024-07-02" ,sj:0,wd:21},
         {rq:"2024-07-02" ,sj:4,wd:22},
         {rq:"2024-07-02" ,sj:8,wd:33},
         {rq:"2024-07-02" ,sj:12,wd:27},
         {rq:"2024-07-02" ,sj:16,wd:28},
         {rq:"2024-07-02" ,sj:16,wd:28},
        ]




//主方法总调用***********************************************************
function chuangjian(){
    var x=200
    var y=160
    var ziti=13

    const bi=CreateHuaBi( document.getElementById('mycanvas'))
    CreatezhexianquyuXY(x,y,ziti,bi)
    CreatezshijianyuXY(x,y,ziti,bi)
    CreateBiaoTouXY(x,y,ziti,bi)
    CreateZuoCeXY(x,y,ziti,bi)
    CreateYuoCeXY(x,y,ziti,bi)
    CreateYuoShangFangXY(x,y,ziti,bi)
    CreateTengTongZuoCeXY(x,y,ziti,bi)
    CreateTengTongquyuXY(x,y,ziti,bi)
    Creategezhi1quyuXY(x,y,ziti,bi)
    Creategezhi2quyuXY(x,y,ziti,bi)
    Creategezhi3quyuXY(x,y,ziti,bi,"大便(次/日)",0)
    Creategezhi3quyuXY(x,y,ziti,bi,"体重(kg)",1)
    Creategezhi3quyuXY(x,y,ziti,bi,"身高(cm)",2)
    Creategezhi3quyuXY(x,y,ziti,bi,"入量(ml)",3)
    Creategezhi3quyuXY(x,y,ziti,bi,"出量(ml)",4)
    Creategezhi3quyuXY(x,y,ziti,bi,"尿液(ml)",5)
    Creategezhi3quyuXY(x,y,ziti,bi," ",6)
    Creategezhi3quyuXY(x,y,ziti,bi," ",7)
    Creategezhi3quyuXY(x,y,ziti,bi,"随机血糖mmol/L",8)
    Creategezhi4quyuXY(x,y,ziti,bi,"过敏药物",9)

    
   
}


function huatu(){
    var x=200
    var y=160
    var ziti=13

    const bi=CreateHuaBi( document.getElementById('mycanvas2'))
    document.getElementById('mycanvas2').width=document.getElementById('mycanvas2').width

    ZhiCreateBiaoTouXYshijian(x,y,ziti,bi,biaotoullie)
    CreateZheXianTuXY(x,y,ziti,bi, tiwenglist,42,1,2)
    CreateZheXianTuXY(x,y,ziti,bi, miabolist,180,2,2)
    CreateZheXianTuXY(x,y,ziti,bi, xinglvlist,180,3,2)
    CreateZheXianXingLvTuXY(x,y,ziti,bi,miabolist,180,3,1,xinglvlist)
    CreateZheXianTuXY(x,y,ziti,bi, tengtonglist,10,1,2)
}

function huatu2(){
    var x=200
    var y=160
    var ziti=13

    const bi=CreateHuaBi( document.getElementById('mycanvas2'))
    document.getElementById('mycanvas2').width=document.getElementById('mycanvas2').width

    ZhiCreateBiaoTouXYshijian(x,y,ziti,bi,biaotoullie1)
    CreateZheXianTuXY(x,y,ziti,bi, tiwenglist2,42,1,2)
    CreateZheXianTuXY(x,y,ziti,bi, miabolist,180,2,2)
   // CreateZheXianTuXY(x,y,ziti,bi, tengtonglist,10,1,2)
   
}
function qingchu(){

}
</script>


<template>
 <div>
        <!-- <label>第一天</label><input v-model="tiwen1[0]" value="36" type="text"><label>4</label><input  value="36.6"  v-model="tiwen1[1]" type="text"><label>8</label><input  value="36.8"  v-model="tiwen1[2]" type="text"><label>12</label><input  value="36.6"  v-model="tiwen1[3]" type="text"><label>16</label><input  value="42"  v-model="tiwen1[4]" type="text"><label>20</label><input  value="42"  v-model="tiwen1[5]" type="text">
        -->
        <el-button @click="chuangjian()">画体温单格子</el-button>
        <el-button @click="huatu()">第一页画体温单折线</el-button>
        <el-button @click="huatu2()">第二页画体温单折线</el-button>
        <el-button @click="huatu2()">撤销体温单框以外的所有画</el-button>
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[0].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[1].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[2].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[3].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[4].wd">

        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[0].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[1].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[2].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[3].wd">
        <input type="text" style="display: inline-block;width: 40px;"  v-model="tiwenglist[4].wd">

        <!-- //创建两个画布，并且叠加在一起，一层画整个体温单框架，一个画折线图和一些数值，每次变化的时候只变化刷新其中一层画布，避免重复画体温单框架 -->
        <canvas id="mycanvas" style="display: block;" width="960px" height="1400px"></canvas>
        <canvas id="mycanvas2" style="display: block;margin-top: -1400px;" width="960px" height="1400px"></canvas>
        
</div>




</template>